function createBanner(selector) {
    const switchbannernum = document.querySelectorAll(`${selector} .switchnoact`);
    const banner = document.querySelector(`${selector} .bannerin`);
    const bannernum = document.querySelectorAll(`${selector} .banneritem`).length;
    let nownum = 0;
    let tempswid;

    function updatebanner() {
        const switchpx = nownum * -700;
        banner.style.transform = `translateX(${switchpx}px)`;
    }

    function updateclass() {
        switchbannernum.forEach((switbannum, swindex) => {
            if (swindex === nownum) {
                switbannum.classList.add('switchact');
            } else {
                switbannum.classList.remove('switchact');
            }
        });
    }

    function nextbanner() {
        nownum++;

        if (nownum >= bannernum) {
            nownum = 0;
        }

        updatebanner();
        updateclass();
    }

    tempswid = setInterval(nextbanner, 5000);

    switchbannernum.forEach((switbannum, swindex) => {
        switbannum.addEventListener('click', () => {
            nownum = swindex;
            updatebanner();
            updateclass();
            clearInterval(tempswid);
            tempswid = setInterval(nextbanner, 5000);
        });
    });
}

createBanner('.msgl');
createBanner('.msglmid');
